<style lang="scss" scoped>
.order-list {
  :deep td {
    vertical-align: top;
  }
  .list {
    text-align: left;
    padding-left: 10px;
    .el-row {
      margin-bottom: 10px;
      div {
        &:last-child {
          color: #999;
        }
      }
    }
  }
}
</style>
<template>
  <div class="order-list">
    <!-- 导出 -->
    <el-row class="import_global">
      <el-button type="warning" icon="el-icon-download" size="small" round>
        导出模板管理
      </el-button>
      <el-button type="primary" icon="el-icon-download" size="small" round>
        导出数据
      </el-button>
      <el-button
        type="danger"
        icon="el-icon-download"
        size="small"
        round
        @click="importVisible = true"
      >
        导入文件
      </el-button>
    </el-row>
    <!-- 导入 -->
    <upload-com
      title="导入订单"
      :visibleProp="importVisible"
      @close="importVisible = false"
      @success="
        onQuery()
        importVisible = false
      "
    />
    <!-- 预览 -->
    <pdf-com
      src="/20220730152312935163.pdf"
      title="文件预览"
      :visibleProp="pdfVisible"
      @close="pdfVisible = false"
    >
      <template v-slot={clickFn}>
        <el-button
          type="warning"
          icon="el-upload"
          size="small"
          >上传</el-button
        >
        <ul>
          <li v-for="item in fileList" :key="item.fileId" @click="clickFn(item.fileUrl)">
            {{item.fileShowName}} （{{item.fileSize}}）
          </li>
        </ul>
      </template>
    </pdf-com>
    <!-- 查询 -->
    <el-form :inline="true" :model="form" label-width="80px" class="query-form">
      <el-col :span="8">
        <el-form-item label="收货单位">
          <el-input
            v-model="form.receiveCompanyName"
            placeholder="输入收货单位"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户">
          <el-input
            v-model="form.receiveCompanyName"
            placeholder="输入客户名"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="提单柜号">
          <el-input v-model="form.user" placeholder="提单号/柜号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="报关单号">
          <el-input v-model="form.user" placeholder="输入报关单号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="货名">
          <el-input v-model="form.goodsName" placeholder="输入货名"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="width-auto" :span="16">
        <el-form-item label="时间">
          <el-row type="flex">
            <el-select
              v-model="form.name"
              placeholder="请选择"
              style="width: 140px; margin-right: 20px"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-date-picker
              v-model="form.declareDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-row>
        </el-form-item>
      </el-col>
      <template v-if="isQuery">
        <el-col :span="8">
          <el-form-item label="封条号">
            <el-input v-model="form.sealNo" placeholder="输入封条号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入境口岸">
            <el-input v-model="form.entryPort" placeholder="输入入境口岸"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="消费单位">
            <el-input v-model="form.consumeCompanyName" placeholder="输入消费单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申报单位">
            <el-input v-model="form.declareCompanyName" placeholder="输入申报单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="启运国">
            <el-input v-model="form.startShipmentCountry" placeholder="输入启运国"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="进境关别">
            <el-input v-model="form.entryGate" placeholder="输入进境关别"></el-input>
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="8" v-if="!isQuery">
        <el-row>
          <i class="el-icon-edit el-button--text" />
          <el-button type="text" style="margin-left: 6px" @click="isQuery=true">
            更多搜索条件
          </el-button>
        </el-row>
      </el-col>
      <el-row class="btn" type="flex" justify="center">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="onQuery">重置</el-button>
      </el-row>
    </el-form>
    <!-- 表格列表 -->
    <table-com
      ref="table"
      api="/order/queryList"
      :column="column"
      :params="{
        sealNo: ''
      }"
      :config="{ getList }"
      @row-click="rowClick"
    >
      <template v-slot="{ prop, row, column }">
        <div class="list">
          <el-row>
            <template v-if="prop === 'fileInfo'">
                <el-tooltip placement="top">
                  <div slot="content">
                    <el-row type="flex" justify="space-between" style="width: 200px">
                      <el-col>发票</el-col>
                      <i class="el-icon-success" v-if="row[prop].hasReceiptFile == 1" />
                      <i class="el-icon-error" v-else />
                    </el-row>
                    <el-row type="flex" justify="space-between" style="width: 200px">
                      <el-col>装箱单</el-col>
                      <i class="el-icon-success" v-if="row[prop].hasPackFile == 1" />
                      <i class="el-icon-error" v-else />
                    </el-row>
                    <el-row type="flex" justify="space-between" style="width: 200px">
                      <el-col>提运单</el-col>
                      <i class="el-icon-success" v-if="row[prop].hasTransportFile == 1" />
                      <i class="el-icon-error" v-else />
                    </el-row>
                    <el-row type="flex" justify="space-between" style="width: 200px">
                      <el-col>合同</el-col>
                      <i class="el-icon-success" v-if="row[prop].hasContractFile == 1" />
                      <i class="el-icon-error" v-else />
                    </el-row>
                    <el-row type="flex" justify="space-between" style="width: 200px">
                      <el-col>植物检疫证书</el-col>
                      <i class="el-icon-success" v-if="row[prop].hasQuarantineFile == 1" />
                      <i class="el-icon-error" v-else />
                    </el-row>
                    <el-row type="flex" justify="space-between" style="width: 200px">
                      <el-col>原产地证据文件</el-col>
                      <i class="el-icon-success" v-if="row[prop].hasPlaceFile == 1" />
                      <i class="el-icon-error" v-else />
                    </el-row>
                  </div>
                  <div>
                    <el-progress :percentage="percentage(row[prop])"></el-progress>
                    报关单证
                  </div>
                </el-tooltip>
            </template>
            <template v-else>
              <div>{{ row[prop][column.child[0].prop] || '-' }}</div>
              <div>{{ column.child[0].label }}</div>
            </template>
          </el-row>
          <template v-if="showList[row.id]">
            <el-row v-for="(item, index) in column.child.slice(1)" :key="index">
              <div>{{ row[prop][item.prop] || '-' }}</div>
              <div>{{ item.label }}</div>
            </el-row>
            <template v-if="prop === 'orderInfo'">
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
              >
                编辑
              </el-button>
            </template>
            <template v-if="prop === 'fileInfo'">
              <el-tooltip placement="top">
                <div slot="content">
                  <el-row v-for="(items, indexs) in row.fileInfo.otherFileInfo" :key="indexs" style="width: 100px">
                    {{items.fileShowName}}.pdf
                  </el-row>
                </div>
                <div>
                  其他文件
                </div>
              </el-tooltip>
              <el-button
                type="text"
                class="white-space"
                v-if="row.fileInfo.declareFileSize"
                @click="fileView(row.fileInfo.cabinetNo)"
              >
                报关单.pdf（{{row.fileInfo.declareFileSize}}）
              </el-button>
              <el-button
                type="text"
                class="white-space"
                v-if="row.fileInfo.quarantineFileSize"
              >
                入境货物检验检疫证明.pdf（{{row.fileInfo.quarantineFileSize}}）
              </el-button>
            </template>
          </template>
        </div>
      </template>
    </table-com>
  </div>
</template>

<script>
import UploadCom from '@/components/UploadCom.vue'
import PdfCom from '@/components/PdfCom.vue'

export default {
  name: 'OrderList',
  components: {
    UploadCom,
    PdfCom
  },
  data() {
    return {
      form: {
        sealNo: '',
        goodsName: '',
        consumeCompanyName: '',
        declareCompanyName: '',
        goodsReceiver: '',
        startShipmentCountry: '',
        declareDate: '',
        receiveCompanyName: '',
        declarationNo: '',
        cabinetNo: '',
        customerName: '',
        entryPort: '',
        entryGate: '',
      },
      isQuery: false,
      column: [
        {
          label: '订单',
          prop: 'orderInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '提运号', prop: 'ladingNo' },
            { label: '报关单单号', prop: 'declarationNo' },
            { label: '关税税号', prop: 'tariffNo' },
            { label: '增值税税号', prop: 'vatNo' },
            { label: '启运国', prop: 'startShipmentCountry' },
            { label: '贸易国', prop: 'tradeCountry' },
            { label: '目的国', prop: 'destCountry' }
          ]
        },
        {
          label: '收发货单位',
          prop: 'addressInfo',
          minWidth: '120',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '货物代理人', prop: 'goodsProxy' },
            { label: '货物接收人', prop: 'goodsReceiver' },
            { label: '申报单位名称', prop: 'declareCompanyName' },
            { label: '收货单位名称', prop: 'receiveCompanyName' },
            { label: '发货单位名称', prop: 'deliverCompanyName' },
            { label: '消费单位名称', prop: 'consumeCompanyName' }
          ]
        },
        {
          label: '核销',
          prop: 'cancelVerificationInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '许可证编号', prop: 'licenseNo' }
          ]
        },
        {
          label: '结算',
          prop: 'settlementInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '总关税金额', prop: 'tariffAmount' },
            { label: '总增值税金额', prop: 'addValueTaxAmount' },
            { label: '总税额', prop: 'sumTaxAmount' }
          ]
        },
        {
          label: '文件',
          prop: 'fileInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
          ]
        }
      ],
      importVisible: false,
      pdfVisible: false,
      showList: [],
      fileList: []
    }
  },
  methods: {
    onQuery() {
      this.$refs.table.fetch(1)
    },
    // 报关单证进度
    percentage(item) {
      let num = 0
      if (item.hasReceiptFile == 1) num += 1
      if (item.hasPackFile == 1) num += 1
      if (item.hasTransportFile == 1) num += 1
      if (item.hasContractFile == 1) num += 1
      if (item.hasQuarantineFile == 1) num += 1
      if (item.hasPlaceFile == 1) num += 1
      return Number((num / 6 * 100).toFixed(2))
    },
    // 点击行展开
    rowClick(row) {
      this.$set(this.showList, row.id, !this.showList[row.id])
    },
    // 文件预览
    async fileView(cabinetNo) {
      console.log(cabinetNo)
      const { data } = await this.$axios.post('/file/queryOrderAllFiles', {
        cabinetNo
      })
      if (data) {
        this.fileList = data.fileInfolist
        this.pdfVisible = true
      }
    },
    getList(list) {
      list.forEach(() => {
        this.showList.push(false)
      })
    }
  },
  mounted() {
    this.onQuery()
  }
}
</script>
